<template>
  <el-dialog draggable title="员工管理" :close-on-click-modal="false" class="yy-modal--custom yy-modal--custom-sub yy-transfer--custom" width="800px" v-model="isVisible" @close="onCancelModel" :show-close="true">
    <div class="yy-depart-member_manage" style="text-align: center;">
      <el-transfer
          :titles="['员工列表', '科室员工']"
          v-model="table.selectList"
          filterable
          :data="table.data"
      />
    </div>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancelModel">关闭</el-button>
          <el-button type="primary" :loading="isSubmit" @click="onSave">保存</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">

import {defineExpose, defineEmits,reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {getDeptMember, addDeptMember} from "@/api/system/dept";
import EmployeeApi from "@/api/system/empl";

const $emit = defineEmits({
  saveSuccess: () => true
})

const isVisible = ref(false)
const depart = ref()
const isSubmit = ref(false)
let employeeSelectorList = []
const table = reactive({
  isLoading: false,
  data: [],
  selectList: []
})

const onShowDialog = (data) => {
  depart.value = data
  isVisible.value = true
  getEmployeeList()
}

const getEmployeeList = (searchKey: string = null) => {
  table.isLoading = true
  EmployeeApi.listEmployee(searchKey, null,1, 9999).then((pagingData) => {

    employeeSelectorList = employeeSelectorList.concat(pagingData.data.map(item => Object.assign({
      label: item.name,
      value: item.id,
      key: item.id,
      origin: item
    })))
    getDepartEmployeeList()
  }, () => {
    table.isLoading = false
  })
}

const getDepartEmployeeList = () => {
  getDeptMember(depart.value.deptId).then((res) => {
    const members = res.code === 200 ? res.data : []
    table.selectList = members.map(item => item.id)
    const data = []
    members.forEach(item => {
      const exit = employeeSelectorList.find(e => e.key == item.id)
      if (!exit) {
        data.push(Object.assign({
          label: item.name,
          value: item.id,
          key: item.id,
          origin: item
        }))
      }
    })
    employeeSelectorList = employeeSelectorList.concat(data)
    table.data = employeeSelectorList
    table.isLoading = false
  }, () => {
    table.isLoading = false
  })
}


const onCancelModel = () => {
  employeeSelectorList = []
  setTimeout(() => {
    table.data = []
    table.selectList = []
  }, 800)
  isVisible.value = false
}

const onSave = () => {
  isSubmit.value = true
  addDeptMember(depart.value.deptId, table.selectList).then(res => {
    ElMessage.success({
      message: '员工保存成功',
      showClose: true
    })
    isSubmit.value = false
    $emit('saveSuccess')
  }, () => isSubmit.value = false)
}
defineExpose({
  onShowDialog
})
</script>
<style scoped lang="scss">
.yy-depart-member_manage {
  :deep(.el-transfer-panel__list.is-filterable) {
    height: calc(100% - 64px) !important;
  }
}

</style>